@use '@angular/material' as mat;
@mixin builder-list($background, $foreground, $primary, $warn) {
  background-color: mat.m2-get-color-from-palette($background, card);
  .component-item {
    // for dynamic-component host class
    .active-toolbar {
      &:hover {
        outline: 1px dashed mat.m2-get-color-from-palette($primary);
      }
    }
    .animate-warn {
      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: mat.m2-get-color-from-palette($warn, 0.2);
        border: 1px solid mat.m2-get-color-from-palette($warn);
      }
    }
  }
  .wrapper {
    #builder-list {
      @include scrollbar(mat.m2-get-color-from-palette($primary));
    }
    .widget-picker {
      .widget-wrapper {
        background-color: mat.m2-get-color-from-palette($background, card);
        box-shadow:
          0px 0.2px 0.6px rgba(0, 0, 0, 0.02),
          0px 0.4px 1.3px rgba(0, 0, 0, 0.028),
          0px 0.8px 2.5px rgba(0, 0, 0, 0.035),
          0px 1.3px 4.5px rgba(0, 0, 0, 0.042),
          0px 2.5px 8.4px rgba(0, 0, 0, 0.05),
          0px 6px 20px rgba(0, 0, 0, 0.07);
        .box {
          color: mat.m2-get-color-from-palette($primary);
        }
      }
      .group-popup,
      .widget-popup {
        @include mat.elevation(10, mat.m2-get-color-from-palette($background, hover), 0.4);
        @include scrollbar(mat.m2-get-color-from-palette($foreground, divider, 0.2));
        background-color: mat.m2-get-color-from-palette($background, card);
        border: 1px solid mat.m2-get-color-from-palette($foreground, divider, 0.1);
      }
      .group-popup {
        color: mat.m2-get-color-from-palette($foreground, text);
        .item {
          border-color: mat.m2-get-color-from-palette($foreground, divider);
          .mat-icon {
            color: mat.m2-get-color-from-palette($primary);
          }
          &:hover {
            background-color: mat.m2-get-color-from-palette($primary, 0.1);
          }
        }
      }
      .widget-popup {
        .hover-show {
          > app-dynamic-component {
            > app-spacer {
              background-color: mat.m2-get-color-from-palette($primary, 0.5);
            }
          }
        }
      }
    }
  }
  .preview {
    background-color: mat.m2-get-color-from-palette($foreground, elevation, 0.85);
    #builder-list {
      background-color: mat.m2-get-color-from-palette($background, card);
    }
    .preview-iframe {
      &:after {
        background-color: mat.m2-get-color-from-palette($foreground, elevation, 0.95);
        @include mat.elevation(2, mat.m2-get-color-from-palette($foreground, elevation), 0.5);
      }
    }
  }
  [contenteditable] {
    outline: none;
  }
  img {
    &[contenteditable='false'] {
      &:hover {
        cursor: pointer;
        opacity: 0.85;
      }
    }
  }
  [contenteditable='true'] {
    cursor: text;
    background-color: mat.m2-get-color-from-palette($primary, 0.1);
  }
  .component-toolbar {
    .actions {
      background-color: #272727;
      .mat-icon {
        color: rgba(255, 255, 255, 0.8);
      }
      @include mat.elevation(2, mat.m2-get-color-from-palette($background, tooltip), 0.25);
      .mat-mdc-button-base {
        color: mat.m2-get-color-from-palette($primary, default-contrast, 0.8);
      }
      .mat-divider {
        height: 16px;
        top: 50%;
        transform: translateY(-50%);
        position: relative;
        border-right-color: mat.m2-get-color-from-palette($primary, default-contrast, 0.4);
      }
    }
  }
}
